<template>
  <div class="resource">
    <div class="container">
      <!-- <div class="handle-box">
        <el-button type="warning" size="mini" @click="orderHouse" icon="el-icon-shopping-cart-1" >创建订单</el-button>
      </div> -->
      <div>
          <el-form ref="formHouse" :model="formHouse" label-width="160px" :rules="form_House">
      <el-form-item label="营业执照" prop="businessLicense">
        <el-upload
          :action="baseUrl+'/goods/order/image/upload'"
          list-type="picture-card"
          :limit="2"
          :on-exceed="handleExceed"
          :headers="headers"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
          :file-list="photoList"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible_img">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="对接人名称" prop="dockingPeople">
        <el-input v-model="formHouse.dockingPeople"></el-input>
      </el-form-item>
      <el-form-item label="对接人电话" prop="dockingPhone">
        <el-input v-model="formHouse.dockingPhone"></el-input>
      </el-form-item>
      <el-form-item label="对接人地址" prop="address">
        <el-input v-model="formHouse.address"></el-input>
      </el-form-item>
      <el-form-item label="电子出证日期" prop="edHisDate">
        <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="formHouse.edHisDate" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="纸质出证日期" prop="paperHisDate">
        <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="formHouse.paperHisDate" style="width: 100%;"></el-date-picker>
      </el-form-item> -->
      <el-form-item label="是否需要咨询服务" prop="consult">
        <el-radio-group v-model="formHouse.consult">
          <el-radio label="1">需要</el-radio>
          <el-radio label="2">不需要</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上传材料压缩包" v-if="formHouse.consult == 2">
        <el-upload
          class="upload-demo"
          :headers="headers"
          :action="`${baseUrl}/goods/order/file/upload`"
          :file-list="fileList444"
          :on-remove="handleRemove444"
          :on-success="handleSuccess444"
          :limit="1"
          :on-exceed="handleExceed444"
          multiple
        >
          <el-button size="mini" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="公司名称">
        <el-input v-model="formHouse.userCompanyName"></el-input>
      </el-form-item>
      <el-form-item label="办公地址">
        <el-input v-model="formHouse.actualAddress"></el-input>
      </el-form-item>
      <el-form-item label="经营范围">
        <el-input v-model="formHouse.region"></el-input>
      </el-form-item>
      <el-form-item label="用户标识">
        <el-input v-model="formHouse.terminalYard"></el-input>
      </el-form-item>
      <el-form-item label="备注信息">
        <el-input type="textarea" v-model="formHouse.remarks"></el-input>
      </el-form-item>
      </el-form>
      <div style="text-align:right"><el-button size="mini" @click="addOrder" type="primary">创建证书订单</el-button></div>
      <!-- <el-table :data="tableHouse" style="width: 100%">
        <el-table-column align="center" porp=""  label="证书"></el-table-column>
        <el-table-column align="center" porp="" label="规格"></el-table-column>
      </el-table> -->
      <span slot="footer" class="dialog-footer">
        <!-- <el-button size="mini" @click="dialogVisible_house = false">关 闭</el-button> -->
        <!-- <el-button size="mini" type="primary" @click="dialogVisible_house = false">确 定</el-button> -->
      </span>
      </div>
    </div>

    <!-- 订单仓库 -->
    <!-- <el-dialog title="创建订单" :visible.sync="dialogVisible_house" width="100%">
      
    </el-dialog> -->

    <!-- 订单添加表单 -->
    <el-dialog title="加入证书" :visible.sync="dialogVisible_add" width="800px">
      <el-form ref="form" :model="form" label-width="160px" :rules="form_rules">
      <el-form-item label="选择证书" prop="certificateName">
        <el-select
          v-model="form.certificateName"
          filterable
          placeholder="请选择"
          clearable
          @change="search_zhengshu"
          style="width:300px"
        >
          <el-option
            v-for="item in list_zhengshu"
            :key="item.id"
            :label="item.certificateName"
            :value="item.certificateName"
          >
          <div style="display:flex;justify-content: space-between;align-items: center;">
            <!-- <img style="width:35px;height:35px" :src="showUrl+item.logo" /> -->
            <span>{{ item.certificateName }}</span>
          </div>
          </el-option>
        </el-select>
        <!-- <div v-if="form.certificateName">描述:<span style="color:#3D6FFF">{{form.desc}}</span></div> -->
      </el-form-item>
      <el-form-item label="选择规格" v-if="form.certificateName">
        <div v-for="(item,index) in socket" :key="index" style="display:flex;flex-wrap:wrap">
          <div>{{item.goodsAttributeName}}</div>
          <div v-for="(item,i) in item.values" :key="i" style="margin-left:10px">
            <el-radio-group v-model="socket_select[index]" @change="guigeC(i)">
              <el-radio :label="item.name"></el-radio>
            </el-radio-group>
          </div>
          <el-input
            v-if="item.name == '其他'"
            v-model="item.inputValue"
            class="inp"
            @blur="bindvalue(item.inputValue,index)"
            size="mini"
            style="width:120px"
            clearable
          ></el-input>
          <!-- <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            style="height:38px"
            class="ml_8"
            @click="handleAddProductAttrValue(index)"
            >增加</el-button
          > -->
        </div>
        <el-button @click="price_jisuan" icon="el-icon-refresh" size="mini" type="primary">生成规格</el-button>
        <div>
          所选规格:<span style="color:#1890FF">{{form.specName}}</span><span style="color:red;margin-left:10px">( 请核对所选规格与生成规格是否相同! )</span>    
        </div>
        <!-- <div>
          价格:￥<span style="color:red">{{form.price}}</span>元(<span style="color:#1890FF">当前价格仅供参考,以实际成交价格为准</span>)
        </div> -->
      </el-form-item>

      <el-form-item>
        <el-button :disabled="certificateBoole" type="primary" @click="sub_add">立即创建</el-button>
        <el-button @click="dialogVisible_add=false">取消</el-button>
      </el-form-item>
      <!-- <el-form-item label="咨询费" prop="consultingFee" v-if="form.consult">
        <span style="color: red;" v-if="form.consult == 1">¥ {{zixunPrice}}</span>
        <span style="color: red;" v-if="form.consult == 2">¥ 0</span>
      </el-form-item> -->
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_add=false">取 消</el-button>
        <el-button type="primary" @click="sub_add">确 定</el-button>
      </span> -->
      </el-form>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog :title="title666" :visible.sync="dialogVisible" width="800px">
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules2"
        label-width="140px"
        size="small"
        class="form-box"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="订单编号" prop="orderSn">
              <el-input v-model="formData.orderSn" disabled></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="咨询公司">
              <el-input
                v-model="formData.companyName"
                :disabled="editFlags"
              ></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="证书名称" prop="certificateName">
              <el-input v-model="formData.certificateName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格:" prop="specName">
              <el-input v-model="formData.specName" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对接人" prop="dockingPeople">
              <el-input
                v-model="formData.dockingPeople"
                :disabled="editFlags"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="dockingPhone">
              <el-input
                v-model="formData.dockingPhone"
                :disabled="editFlags"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="营业执照" prop="businessLicense">
              <div style="margin-right:80px" v-for="(item,index) in formData.businessLicense" class="avatar" :key="index">
                <viewer>
                  <img :src="showUrl + item" alt="" width="200" height="180"/>
                </viewer>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电子证书出证时间" prop="edHisDate">
              <el-date-picker
                v-model="formData.edHisDate"
                type="date"
                placeholder="选择出证日期"
                value-format="yyyy-MM-dd"
                :disabled="editFlags"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="纸质证书出证时间" prop="paperHisDate">
              <el-date-picker
                v-model="formData.paperHisDate"
                type="date"
                placeholder="选择出证日期"
                value-format="yyyy-MM-dd"
                :disabled="editFlags"
              >
              </el-date-picker>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="订单状态" prop="state">
              <el-select
                v-model="formData.state"
                filterable
                placeholder="请选择"
                clearable
                :disabled="editFlags"
              >
                <el-option
                  v-for="item in stateOptions"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="证书金额" prop="price">
              <el-input v-model="formData.price" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="咨询费用" v-if="formData.consult == 1">
              <el-input v-model="formData.consultingFee" disabled>
                <span slot="append" class="blue2" @click="payMoney">点击付款</span>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="formData.state == 6 || formData.state == 7">
            <el-form-item label="物流单号" prop="wuLiu">
              <el-input
                v-model="formData.wuLiu"
                :disabled="editFlags"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                autosize
                type="textarea"
                v-model="formData.remarks"
                :disabled="editFlags"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="title666 == '编辑订单'">
        <el-button @click="dialogVisible = false" size="mini">取消</el-button>
        <el-button @click="submitForm" type="primary" size="mini"
          >确定</el-button
        >
      </span>
    </el-dialog>

    <!-- 下载电子证书 -->
    <el-dialog :title="wuliuTitle" :visible.sync="wuliuVisible" width="40%">
      <el-form
        ref="wuliuForm"
        :model="wuliuForm"
        label-width="120px"
        :rules="wuliuRules"
      >
        <el-form-item label="电子证书(水印)">
          <div
            v-for="(item,index) in wuliuForm.huPic"
            :key="index"
            class="order_pic"
            ref="previewImg"
          >
            <img :src="showUrl + item.url" alt="" class="order_img" />
          </div>
          <el-button type="primary" @click="downLoadPaper11(1)">下载</el-button>
        </el-form-item>
        <el-form-item label="电子证书(清晰)">
          <div
            v-for="(item,index) in wuliuForm.certPic"
            :key="index"
            class="order_pic"
            ref="previewImg"
          >
            <img :src="showUrl + item.url" alt="" class="order_img" />
          </div>
          <el-button type="primary" @click="downLoadPaper11(2)">下载</el-button>
        </el-form-item>
      </el-form>
      <!-- <span slot="footer" class="dialog-footer" v-if="wuliuForm.edHisPic">
        <el-button type="primary" @click="downs">下 载</el-button>
      </span> -->
    </el-dialog>

    <!-- 流程查看 -->
    <el-dialog title="流程查看" :visible.sync="dialogVisible1010" width="800px">     
      <div class="progress_box" v-for="(item,index) in steps" :key="index">
				<div class="left_c" v-if="item.finish == 1">已完成</div>
				<div class="left" v-if="item.finish == 0">处理中</div>
				<div class="center">
          <i class="el-icon-star-on" style="color:#000" v-if="item.finish == 1"></i>
          <i class="el-icon-star-on" style="color:#888" v-if="item.finish == 0"></i>
				</div>
				<div :class="[item.finish==1?'right_c':'right']">
				<!-- <div class="right_c"> -->
					<div class="top88" v-if="item.finish == 1">
						<span class="time88">{{item.updateTime}}</span>
						<span
              class="loading88"
              v-if="item.accessory && item.flowSerial != 18"
              @click="downLoadPaper(item.accessory)"
              >下载附件</span
            >
            <span
              class="loading88"
              v-if="item.accessory && item.flowSerial == 18"
              @click="ViewCert(item.accessory)"
              >预览证书</span
            >
					</div>
					<div class="title88">[{{item.flowName}}]</div>
					<div class="desc88" v-if="item.finish == 1 && item.context">{{item.context}}</div>
				</div>
			</div>
    </el-dialog>
    <!-- 预览证书 -->
    <el-dialog title="证书预览" :visible.sync="certVisible" width="700px">
      <div v-for="(item,index) in cert_view" :key="index" class="father_box">
        <img :src="showUrl + item.url" width="200" height="240"/>
        <div class="son_box">水印证书</div>
      </div>
    </el-dialog>
    <el-dialog title="微信扫码支付" :visible.sync="payWeiPay" width="400px">
      <div>
        <img :src="payImg" width="300" height="300"/>
        <!-- <div v-html="payImg"></div> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DomToImage from "dom-to-image";
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import {
  orderReceive_List,
  updateOrder,
  checkTeacher,
  record,
  delOrder,
  addOrder,
  queryProcess,
  updateProcess,
  orderPay
} from "@/api/order/orderReceiveAds";
import { certificateList } from "@/api/certificate/certificateAds";
import { teacherList, checkTeacherList } from "@/api/teacher/teacherAds";
import { queryGood,queryGoodInfo} from "@/api/goods/goods";
import { getToken } from "@/utils/auth";
export default {
  components: {},
  props: [],
  data() {
    return {
      payWeiPay:false,
      payImg:'',
      cert_view: [],
      certVisible: false,
      fileList444: [],
      // 立即创建订单
      certificateBoole:true,
      consultList: [
        { id: 1,title: '需咨询' },
        { id: 2,title: '不咨询' }
      ],
      consultListStates: [
        { id: '0',title: '未支付' },
        { id: '1',title: '已支付' }
      ],
      dialogVisible1010: false,
      steps: [],  // 流程
      zixunPrice:'',
      photoList:[],
      dialogVisible_img:false,
      dialogImageUrl:'',
      // 仓库
      dialogVisible_house:false,
      tableHouse:[],
      formHouse:{
       count:1,
        desc:'',
        state:1,
        totalMoney:0,
        discountsMoney:0,
        businessLicense:[]
      },
      // 仓库验证
      form_House:{
        dockingPeople:[
          { required: true, message: "请输入对接人", trigger: "blur" }
        ],
        dockingPhone:[
          { required: true, message: "请输入对接人电话", trigger: "blur" }
        ],
        edHisDate:[
          { required: true, message: "请选择电子出证日期", trigger: "blur" }
        ],
        paperHisDate:[
          { required: true, message: "请选择纸质出证日期", trigger: "blur" }
        ],
        consult:[
          { required: true, message: "请选择是否需要咨询服务", trigger: "change" }
        ],
        businessLicense:[
          { required: true, message: "请上传营业执照", trigger: "blur" }
        ],
        materialZip: [
          { required: true, message: "请上传材料压缩包", trigger: "blur" }
        ]
      },
      // 证书
      form:{
        payMoney: 0,
        payType: 1,
        goodsId:'',
        count:1,
        desc:'',
        state:1,
        totalMoney:0,
        discountsMoney:0,
        businessLicense:[]
      },
      form_rules:{
        address: [
          { required: true, message: "请输入地址", trigger: "blur" }
        ],
        certificateName:[
          { required: true, message: "请选择证书", trigger: "change" }
        ],

      },
      socket_select:[],
      socket:[],
      socket_show:[],
      list_zhengshu:[],
      dialogVisible_add:false,
      disabled: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      picsFileList: [],
      // 记录
      recordDialogVisible: false,
      recordList: [],
      params11: {
        pageNum: 1,
        pageSize: 10
      },
      recordTotal: 0,

      teacherId: undefined,
      dialogVisible_teacher: false,
      cateList2: [],
      // 非多个禁用
      multiple: true,
      //删除
      ids: [],
      headers: { Authorization: "Bearer " + getToken() },
      upImage: process.env.VUE_APP_BASE_API,
      stateOptions: [
        {
          id: 1,
          title: "待审核"
        },
        {
          id: 2,
          title: "已取消"
        },
        {
          id: 3,
          title: "平台待接单"
        },
        {
          id: 4,
          title: "处理中"
        },
        {
          id: 5,
          title: "待出证"
        },
        {
          id: 6,
          title: "待签收"
        },
        {
          id: 7,
          title: "已完成"
        },
        {
          id: 8,
          title: "已拒绝"
        }
      ],
      title666: "",
      rules2: {
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        companyName: [
          { required: true, message: "请输入公司名称", trigger: "blur" }
        ],
        linkman: [
          { required: true, message: "请输入联系人名称", trigger: "blur" }
        ],
        businessLicense: [
          { required: true, message: "请上传图片", trigger: "blur" }
        ],
        wuLiu: [{ required: true, message: "请填写物流单号", trigger: "blur" }]
      },
      input: "",
      openFlag: true,
      loading: true,
      //数据
      tableData: [],
      params: {
        pageNum: 1,
        pageSize: 10
      },
      pageTotal: 0,
      dialogVisible: false, // 是否展示编辑页面
      // 新增/编辑数据
      formData: {
        businessLicense: ""
      },
      customer: {
        customerId: ""
      },
      paramsFlag: 0,
      editFlags: true,

      wuliuTitle: "",
      wuliuVisible: false,
      wuliuForm: {
        huPic: [],
        certPic: []
      },
      wuliuRules: {
        edHisPic: [
          { required: true, message: "请上传电子证书", trigger: "blur" }
        ]
      },
    };
  },
  computed: {},
  created() {
    if(this.$route.params.state){
      this.params.state = this.$route.params.state;
      this.getData00()
    }else{
      this.getData00();
    };
  },
  mounted() {
    this.getGoodsList();
    this.getDicts("money_zixun").then(response => {
      this.zixunPrice = response.data[0].dictValue;
    });
  },
  watch: {},
  methods: {
    checkPermi,
    checkRole,
    // 打开仓库
    orderHouse() {
      this.dialogVisible_house = true;
    },
    bindvalue(e,ind) {
      // console.log(e,ind,'123')
      console.log(this.socket_select)
      this.socket_select[ind] = e
    },
    // 点击预览证书
    ViewCert(val){
      this.cert_view = JSON.parse(val);
      this.certVisible = true;
    },
    // 点击添加规格值
    handleAddProductAttrValue(idx) {
      console.log(idx)
      // let options = this.selectProductAttr[idx].select;
      console.log(this.socket[idx].inputValue, "输入的值");
      if (
        this.socket[idx].inputValue == null ||
        this.socket[idx].inputValue == "" ||
        this.socket[idx].inputValue == undefined
      ) {
        this.$message({
          message: "规格值不能为空",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      // if (options.indexOf(this.socket[idx].inputValue) !== -1) {
      //   this.$message({
      //     message: "属性值不能重复",
      //     type: "warning",
      //     duration: 1000,
      //   });
      //   return;
      // }
      let data = {
        name:this.socket[idx].inputValue,
        isClick:0
      }
      this.socket[idx].values.push(data);
      this.socket[idx].inputValue = null;
    },
    // 点击查看流程
    handleProcess(row){
      this.steps = [];
      queryProcess({
        orderId: row.id
      }).then(res => {
        if(res.code == 200){
          res.rows.forEach(item => {
            if(item.flowSerial == 7 || item.flowSerial == 7.5){
              console.log('不允许咨询公司查看');
            }else{
              this.steps.push(item);
            }
          })
          this.dialogVisible1010 = true;
        }
      })
    },
    // 点击下载附件
    downLoadPaper(val){
      let value = JSON.parse(val);
      let that = this;
      value.forEach(item => {
        this.downloadFile(item.url)
      })
    },
    downLoadPaper11(i){
      let value;
      if(i == 1){
        value = this.wuliuForm.huPic;
      }else{
        value = this.wuliuForm.certPic;
      }
      let that = this;
      value.forEach(item => {
        this.downloadFile(item.url)
      })
    },
    downloadFile(url){
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";  // 防止影响页面
      iframe.style.height = 0;  // 防止影响页面
      iframe.src = this.showUrl + url;
      document.body.appendChild(iframe);  // 这一行必须，iframe挂在到dom树上才会发请求
      // 1分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
      setTimeout(()=>{
        iframe.remove();
      }, 1 * 60 * 1000);
    },
    payMoney(){
      console.log('此处增加微信网页支付')
      orderPay(this.formData.id).then(res=>{
        this.payWeiPay=true;
        // 转换成本地二进制文件
        this.payImg=window.URL.createObjectURL(res)
      })
    },
    handleRemove444(file){
      this.fileList444.forEach((item, i) => {
        if (item.url == file.url) {
          this.fileList444.splice(i, 1);
        }
      });
    },
    handleSuccess444(res,file){
      if (res.code == 200) {
        this.fileList444.push({
          name: file.name,
          url: res.data
        });
        this.$message.success("上传成功！");
      }
    },
    handleExceed444(){
      this.$message.warning(`当前限制仅可上传 1 个文件`);
    },
    handleRemove(file, fileList){
      // console.log(file, fileList);
      for(let i = 0;i<this.form.businessLicense.length;i++){
        if(file.response.data==this.form.businessLicense[i]){
          this.form.businessLicense.splice(i,1)
        }
      };
      // console.log(this.form.businessLicense,'删除后')
    },
    handleExceed(){
      this.$message.error('最多上传两张图片')
    },
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        // console.log(res,file);
        this.formHouse.businessLicense.push(res.data);
        this.$message.success(`上传成功`);
        // console.log(this.form.businessLicense)
      }
    },
    // 用于进行规格比对
    price_jisuan(){
      let that = this;
      console.log(that.socket_select.length,'sosele')
      console.log(that.socket.length,'s')
      if(that.socket_select.length == that.socket.length){
        that.form.specName = that.socket_select.join(',');
        that.certificateBoole = false;
        // 无原始值的重新渲染
        that.$forceUpdate();
      }else {
        this.$message.error("请选择完整规格");
      }
      // if(that.socket_select.length == that.socket.length){
      //   for (let i = 0; i < that.socket_show.length; i++) {
      //     let arr = [];
      //     JSON.parse(that.socket_show[i].spData).forEach(function (v, index) {
      //       arr.push(v.value)
      //       // console.log(arr)
      //       if (JSON.stringify(arr) === JSON.stringify(that.socket_select)) {
      //         // console.log(that.socket_show[i].price,'--------------')
      //         that.form.price = that.socket_show[i].price;
      //         that.form.specName = that.socket_select.join(',')
      //         // 无原始值的重新渲染
      //         that.$forceUpdate();
      //       }
      //     })
      //   };
      // }else{
      //   this.$message.error("请选择完整规格");
      // }
    },
    search_zhengshu(e){
      // console.log(e,132,this.form);
      for(let i = 0 ; i<this.list_zhengshu.length;i++){
        if(this.list_zhengshu[i].certificateName==e){
          queryGoodInfo(this.list_zhengshu[i].id).then((res) => {
            if (res.code == 200) {
              console.log(res);
              this.form.goodsId=res.data.certificateGoods.id;
              this.form.desc=res.data.certificateGoods.details;
              this.socket = res.data.goodsAttributeValue;
              this.socket_show = res.data.goodsSkuStock;
            }
          });
        }
      }
    },
    guigeC(e,i){
      // console.log(e,i,this.socket_select)
    },
    // 获取商品列表
    getGoodsList() {
      queryGood({
        pageNum:1,
        pageSize:99999
      }).then(res => {
        if (res.code == 200) {
          // console.log(res);
          this.list_zhengshu = res.rows;
        }
      })
    },
    addOrder(){
      this.dialogVisible_add = true
      this.form = {
        businessLicense: [],
      }
      this.certificateBoole = true;
      console.log(this.certificateBoole)
      this.fileList444 = [];
      this.socket_select = [];
      this.photoList=[]
    },
    sub_add(){
      // console.log(this.form.businessLicense,'营业执照');
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.form.consult == 2){
            if(this.fileList444.length >= 1){
              this.form.materialZip = JSON.stringify(this.fileList444);
            }else{
              return this.$message.error('请上传材料压缩包成功后创建订单！')
            }
          };
          console.log(this.form)
          // if(this.form.price){
            // this.form.orgPrice = this.form.price;
            this.form.consultingFee = this.form.consult == 1 ? this.zixunPrice:'0';
            this.form.businessLicense = JSON.stringify(this.form.businessLicense);
            // let data = {
            //   certificateOrderList:[]
            // }
            this.formHouse.certificateOrderList = []

            // let fof = Object.assign(this.form,this.formHouse)
            this.formHouse.businessLicense = JSON.stringify(this.formHouse.businessLicense);
            this.formHouse.certificateOrderList.push(this.form)
            // data.certificateOrderList.push(this.form)
            addOrder(this.formHouse).then((res)=>{
              if(res.code==200){
                let orderId = res.data;
                updateProcess({
                  orderId: orderId,
                  flowSerial: 7.5,
                  accessory: this.form.materialZip,
                  finish: 1
                }).then(res => {
                  if(res.code == 200){
                    this.$message.success('创建订单成功！')
                    // this.getData00();
                    // this.dialogVisible_add=false;
                    this.form = {};
                    this.$router.push({
                        path:"/order_zixun/orderList_zixun"
                    })
                  }
                })
              }
            })
          // }else{
          //   this.$message.error('请点击生成规格！')
          // }
        }
      })
    },
    // 点击下载证书
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
    // 点击图片下载
    downs(i) {
      let urls;
      if(i == 1){
        urls = this.wuliuForm.huPic;
      }else{
        urls = this.wuliuForm.certPic;
      }
      urls.forEach(item => {
        this.downloadIamge(this.showUrl + item.url, "电子证书");
      });
    },
    // 咨询公司端 -- 下载电子证书
    handleUpload(index, row) {
      this.wuliuTitle = "电子证书";
      this.wuliuForm = {
        huPic: [],
        certPic: []
      };
      queryProcess({
        orderId: row.id,
        flowSerial: 18
      }).then(res => {
        if(res.code == 200){
          this.wuliuForm.huPic = res.rows[0].accessory ? JSON.parse(res.rows[0].accessory):[];
        }
      })
      queryProcess({
        orderId: row.id,
        flowSerial: 20
      }).then(res => {
        if(res.code == 200){
          this.wuliuForm.certPic = res.rows[0].accessory ? JSON.parse(res.rows[0].accessory):[];
        }
      })
      
      this.wuliuVisible = true;
    },

    formatState(val) {
      var str1 = this.checkOptions.find(function(item) {
        return item.id == val;
      });
      if (str1) return str1.title;
    },
    // 查询证书类别列表
    getCateList() {
      this.loading = true;
      certificateList({
        pageNum: 1,
        pageSize: 9999
      }).then(res => {
        this.loading = false;
        if (res.code == 200) {
          this.cateList2 = res.rows;
          // this.cateList = res.rows;
        } else {
          this.msgError("查询失败！");
        }
      });
    },
    querySearch(queryString, cb) {
      console.log(queryString, this.cateList2);
      var restaurants = this.cateList2;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.categoryName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    // 键值配对
    status(val) {
      let str = this.stateOptions.find(function(item) {
        return item.id == val;
      });
      if (str) return str.title;
    },
    status_consult(val){
      let str = this.consultList.find(function(item){
        return item.id == val;
      })
      if(str) return str.title;
    },
    // 键值配对
    status2(val) {
      let str = this.cateList2.find(function(item) {
        return item.id == val;
      });
      if (str) return str.categoryName;
    },

    // 新增修改的方法
    submitForm() {
      this.$refs["formData"].validate(valid => {
        if (valid) {
          this.formData.businessLicense = JSON.stringify(
            this.formData.businessLicense
          );
          updateOrder(this.formData).then(res => {
            if (res.code == 200) {
              this.$message.success("保存成功");
              this.dialogVisible = false;
              this.formData = {};
              this.getData00();
            } else {
              this.$message.error("保存失败");
              this.dialogVisible = false;
              this.getData00();
            }
          });
        }
      });
    },
    // 打开搜索
    openSearch() {
      this.openFlag = !this.openFlag;
    },
    // 重置搜索框
    cancelData() {
      console.log('1')
      this.resetForm("params");
      this.params={
        pageNum: 1,
        pageSize: 10
      }
      this.getData00();
    },
    handleAdd() {
      this.formData = {
        businessLicense: ""
      };
      this.dialogVisible = true;
      this.title666 = "新增";
    },
    handleEdit(index, row) {
      let rowCopy = JSON.parse(JSON.stringify(row));
      this.formData = rowCopy;
      // console.log(this.formData, "表单-----------");
      this.formData.businessLicense = JSON.parse(row.businessLicense);
      this.editFlags = true;
      this.dialogVisible = true;
      this.title666 = "查看";
    },
    handleEditOrder(index, row) {
      this.editFlags = false;
      let rowCopy = JSON.parse(JSON.stringify(row));
      this.formData = rowCopy;
      this.formData.businessLicense = JSON.parse(row.businessLicense);
      this.formData.edHisPic = JSON.parse(row.edHisPic);
      this.dialogVisible = true;
      this.title666 = "编辑订单";
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    // 删除操作
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
      this.single = val.length != 1;
      this.multiple = !val.length;
    },
    // 批量删除
    handleDelete(row) {
      const id = row.id || this.ids;
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return delOrder(id);
        })
        .then(() => {
          this.getData00();
          this.msgSuccess("删除成功");
        })
        .catch(function() {});
    },
    //获取数据
    getData00() {
      orderReceive_List(this.params).then(res => {
        if (res.code == "200") {
          this.tableData = res.rows;
          this.pageTotal = res.total;
          this.loading = false;
        }
      });
    },
    // 触发搜索按钮
    search() {
      this.$set(this.params, "pageNum", 1);
      this.paramsFlag = 0;
      this.getData00();
    }
  }
};
</script>

<style lang="scss" scoped>
.resource {
  padding: 30px;
}
.container {
  margin-top: 20px;
}
.handle-box {
  margin-bottom: 10px;
}

.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.yellow {
  color: #f57506;
}
.green {
  color: green;
  cursor: pointer;
}
.blue2 {
  color: #409eff;
  cursor: pointer;
}
.blue {
  color: #409eff;
  cursor: pointer;
  text-decoration: underline;
}
.mr10 {
  margin-right: 10px;
}

.searchForm .el-form-item--mini.el-form-item,
.searchForm .el-form-item--small.el-form-item {
  margin-bottom: 1px;
}
.study_pic {
  display: block;
  width: 100px;
  height: 85px;
  margin: auto;
  /* border-radius: 50%; */
}
.avatar {
  display: inline-block;
  margin-right: 10px;
  position: relative;
}
.avatar img {
  width: 200px;
}
.order_pic {
  display: inline-block;
  margin-right: 20px;
}
.order_img {
  width: 150px;
  height: 170px;
}
.order_btn {
  color: #409eff;
  cursor: pointer;
}

.progress_box{
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 10px 30px;
  margin: 0 auto;
  justify-content: space-between;
  background-color: #fff;
  /* align-items: center; */
}
.progress_box .left{
  width: 15%;
  color: #888;
  font-size: 14px;
}
.progress_box .left_c{
  width: 15%;
  color: #444;
  font-weight: bold;
  font-size: 14px;
}
.progress_box .right{
  width: 75%;
  color: #888;
  font-size: 14px;
}
.progress_box .right_c{
  width: 75%;
  color: #444;
  font-size: 14px;
}
.progress_box .center{
  width: 10%;
  text-align: center;
  line-height: 1;
  /* display: flex;
  align-items: center; */
}
.top88{
  display: flex;
  align-items: center;
}
.title88{
  display: flex;
  align-items: center;
  margin: 0px 0 10px;
  font-weight: bold;
}
.time88 {
  margin-bottom: 10px;
}
.desc88{
  margin-bottom: 10px;
}
.loading88{
  color: #3D6FFF;
  margin-left: 40px;
  cursor: pointer;
}
.father_box {
  position: relative;
  display: inline-block;
  margin-right: 20px;
}
.son_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 240px;
  background-color: rgba(0,0,0,.3);
  text-align: center;
  line-height: 240px;
  font-size: 30px;
  color: #fff;
}
.inp {
  width: 160px !important;
  height: 30px !important;
  margin-left: 10px;
  margin-bottom: 20px;
}
.ml_8 {
  margin-left: 8px;
}
</style>
